<template>
	<div class="list" ref="wrapper">
		<div class="wrapper">
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper"><span>{{cityname}}</span></div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list" >
					<div class="button-wrapper" v-for="item in hotCitys" :key="item.id" @click="handlecityClick(item.name)"><span>{{item.name}}</span></div>
				</div>
			</div>
			<div class="area" v-for="(item,key) of citys" :key="key" :ref="key">
				<div class="title border-topbottom">{{key}}</div>
				<div class="item_list">
					<div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id" @click="innerClick(innerItem.name)">{{innerItem.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>	
<script>
	import BScroll from 'better-scroll'
	import { mapState, mapMutations } from 'vuex'
	export default{
		props:{
			hotCitys:Array,
			citys:Object,
			letter:String
		},
		computed:{
			...mapState(['cityname'])
		},
		mounted(){
			this.scroll = new BScroll(this.$refs.wrapper)
		},
		methods:{
			...mapMutations(['changeCityname']),
			handlecityClick(city){
				this.changeCityname(city)
				this.$router.push('/')
			},
			innerClick(city){
				this.changeCityname(city)
				this.$router.push('/')
			}
		},
		watch:{
			letter(){
				const ref=this.$refs[this.letter][0];
				if(this.letter){
					this.scroll.scrollToElement(ref,500)
				}
			}
		}
	}
</script>
<style scoped lang="stylus">	
	@import '~style/varibles.styl';
	.border-bottom
		&:before
			border-color	#ccc
	.border-topbottom
		&:before
			border-color	#ccc
		&:after
			border-color	#ccc
	.list
		position	absolute
		left	0
		top	1.76rem
		bottom	0
		right	0
		overflow	hidden
		.title
			line-height	0.5rem
			padding-left	0.2rem
			background	#eee
			color	#666
			font-size	0.3rem
		.item_list
			.item
				line-height	0.76rem
				color	#666
				font-size	0.28rem
				padding-left	0.2rem
		.button-list
			padding	0.1rem
			overflow	hidden
			padding-right	0.6rem
			.button-wrapper
				width	33.33%
				float	left
				span
					padding	0.1rem
					box-sizing	border-box
					text-align	center
					margin	0.1rem
					font-size	0.28rem
					display	block
					color	#666
					border	1px solid #ccc
		
</style>